<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2024-03-25 14:28:46
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2024-03-25 18:19:19
 * @FilePath: \Song-ui\src\components\DropDown\DropDown.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, withDefaults } from 'vue'
import type { Ref } from 'vue'
import type { DropDownProps, DropDownEmits, DropDownInstance, MenuOption } from './type'
import Tooltip from '../Tooltip/Tooltip.vue'
import RenderVnode from '../Common/RenderVnode'
import type { TooltipInstance } from '../Tooltip/type'

const toolTipRef = ref() as Ref<TooltipInstance>

const props = withDefaults(defineProps<DropDownProps>(), {
  hideAfterClick: true
})
const emits = defineEmits<DropDownEmits>()

const visibleChange = (e: boolean) => {
  emits('visible-change', e)
}

const itemClick = (e: MenuOption) => {
  if (e.disabled) {
    return
  }

  emits('select', e)
  
  if (props.hideAfterClick) {
    // 关闭
    toolTipRef.value.hide()
  }
}


// 导出实例
defineExpose<DropDownInstance>({
  show: toolTipRef.value?.show,
  hide: toolTipRef.value?.hide
})
</script>

<template>
  <div class="sg-dropdown">
    <Tooltip
      :placement="placement"
      :trigger="trigger"
      @visible-change="visibleChange"
      ref="toolTipRef"
    >
      <slot />
      <template #content>
        <ul class="sg-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key">
            <li v-if="item.divided" role="sparator" class="divided-placeholder"></li>
            <li
              @click="itemClick(item)"
              class="sg-dropdown__item"
              :class="{ 'is-disabled': item.disabled, 'is-divided': item.divided }"
              :id="`dropdown-item-${item.key}`"
            >
            <RenderVnode :vNode="item.label"></RenderVnode>
          </li>
          </template>
        </ul>
      </template>
    </Tooltip>
  </div>
</template>

<style lang="scss" scoped></style>
